<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">提现</view>
		</view>
		<view class="clear_box"></view>
		
		<view class="main">
			<view class="card">
				<view class="c_title">提现余额</view>
				<view class="input_box">
					<view class="code">￥</view>
					<input class="inp" type="digit" v-model="money" placeholder="输入提现金额" placeholder-style="font-size: 4vw;"/>
					<view class="btn" @click="allBalanceWithdraw">全部</view>
				</view>
				<view class="tip">
					可提现余额<label class="balance">￥{{all_balance}}</label>
				</view>
			</view>
			
			
			<view class="details_box details_boxNo">
				<view class="list">
					<view class="name">提现卡号</view>
				</view>
				<view class="list" @tap="closePupu">
					<view class="name">银行卡</view>
					<view class="text">
						<view class="i" >
							<!-- <image src="../../static/bank01.png" mode="widthFix"></image> -->
						</view>
						<view class="t">{{bank_a}}</view>
					</view>
					<view class="arrow iconfont icon-xiangyou1"></view>
				</view>
			</view>
			
			
		</view>
		
		<view class="confirm" @click="commit()">确认</view>
		
		<!-- 弹窗 -->
		<view class="pupu_box" @tap="closePupu" v-if="pupu">
			<view class="pupu_show" @tap.stop="">
				<view class="pupu_title">选择银行卡</view>
				<view class="close iconfont icon-guanbi1" @tap="closePupu"></view>
				<view class="pupu_value">					
					<!--  银行 -->
					<view class="pupu_content">
						<block v-for="(item, index) in bank" :key="index">
							<view class="bank_list" :data-index="index" @tap="setBank">
								<view class="icon">
									<image :src="item.icon" mode="widthFix"></image>
								</view>
								<view class="text">{{item.name}}</view>
								<view class="tick iconfont icon-dagou" :class="item.tick ? 'tickColor' : ''"></view>
							</view>
						</block>
						<view class="bank_list" :data-url="'/pages/personalcenter/bank/bank'" @click="gotopage">
							<view class="icon">
								<image src="../../static/bank04.png" mode="widthFix"></image>
							</view>
							<view class="text">添加新卡提现</view>
							<view class="arrow iconfont icon-xiangyou1"></view>
						</view>
						<view class="pupu_menu" @tap="closePupu">确认</view>
					</view>
					
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pupu:false,
				page:1,
				scrrol:false,
				info:'',
				money:0,
				all_balance:'',
				bank:[
					/* {
						icon:'../../static/bank01.png',
						name:'工商银行储蓄卡（6696）',
						tick:true,
					},
					{
						icon:'../../static/bank02.png',
						name:'建设银行储蓄卡（6688）',
						tick:false,
					},
					{
						icon:'../../static/bank03.png',
						name:'农业银行储蓄卡（7788）',
						tick:false,
					} */
				],
				bank_a:'',
				bank_id:0,
			}
		},
		onLoad(e) {
			let that = this;
			that.loadBank();
			that.all_balance = e.money;
		},
		onShow() {
			let that = this;
			let bank_load = uni.getStorageSync('bank_load');
			if (bank_load){
				that.loadBank();
				uni.removeStorageSync('bank_load');
			}
		},
		methods: {
			closePupu(){
				let that = this;
				that.pupu = !that.pupu;
			},
			setBank(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.bank.forEach(item => {
					this.$set(item, 'tick', false);
				});
				that.bank[index].tick = true;
				that.bank_id = that.bank[index].id;
				that.bank_a = that.bank[index].name;
			},
			allBalanceWithdraw(){
				this.money = this.all_balance;
			},
			loadData() {
				let that = this;
				that.Net._get('auth/info', {}, res => {
					if (res.code == 200) {
						that.all_balance = res.data.user_money;
					}
				});
			},
			loadBank(){
				let that = this;
				that.Net._get('auth/card_list', {}, res => {
					if (res.code == 200) {
						that.bank = res.data.data;
						if (that.bank.length > 0){
							that.bank_a = that.bank[0].name;
							that.bank_id = that.bank[0].id;
						}
					}
				});
			},
			commit(){
				let that = this;
				if (!that.money){
					that.Msg.Fail('请填写金额');
					return;
				}
				if (!that.bank_id){
					that.Msg.Fail('请填写银行账号');
					return;
				}
				let param = {
					cash_money:that.money,
					card_id:that.bank_id,
				};
				that.Net._post('auth/cash',param , res => {
					if (res.code == 200) {
						that.Msg.Success('提交成功，等待打款', res => {
							uni.navigateBack({});
						});
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
		  var that = this;
		  that.page++;
		  // that.Net._get('shop_goods', {per_page:'10',page:that.page,}, res => {
		  //   if (res.code == 200) {
		  //     //console.log(res)
		  //     if (res.data.data == '') {
		  //       uni.showToast({
		  //         title: '已经是最后一页了',
		  //         duration: 2000,
		  //         icon: 'none'
		  //       });
		  //     } else {
		  //       that.info = that.info.concat(res.data.data); //将数据拼接在一起
		  //     }
		  //   } else if (res.code == 0) {
		  //     that.Msg.Success(res.msg, res => {});
		  //   }
		  // });
		},
	}
</script>

<style lang="scss">
	.scrrolHeader{
		background-color: #FF7701 !important;
	}
	
	.main{
		width: 100%;
		padding: 4vw 4%;
	}
	.card:not(:first-child){
		margin-top: 30rpx;
	}
	.card{
		width: 100%;
		padding: 3.5vw;
		border-radius: 30rpx;
		background: #ffffff;
		.c_title{
			font-size: 4vw;
			font-weight: bold;
			color: #333333;
		}
		.input_box{
			width: 100%;
			display: flex;
			align-items: center;
			padding: 6vw 0 3vw;
			border-bottom: 1rpx solid #EEEEEE;
			.code{
				font-size: 6vw;
				font-weight: bold;
				color: #333333;
			}
			.inp{
				flex: 1;
				font-size: 7vw;
				color: #333333;
				padding: 0 25rpx;
			}
			.btn{
				font-size: 4vw;
				color: #FF7701;
			}
		}
		.tip{
			width: 100%;
			padding-top: 15rpx;
			color: #999999;
			font-size: 3vw;
			.balance{
				color: #DB5948;
				padding-left: 5rpx;
			}
		}
		.row{
			width: 100%;
			padding: 4vw 0;
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			.icon{
				font-size: 7vw;
				color: #28C445;
			}
			.txt{
				font-size: 4vw;
				font-weight: bold;
				color: #333333;
				flex: 1;
				padding: 0 30rpx;
			}
			.icon2{
				font-size: 6vw;
				color: #999999;
			}
			.icon2_s{
				color: #FF7701;
			}
		}
	}
	.footer{
		position: fixed;
		z-index: 98;
		width: 100%;
		height: 19vw;
		padding: 2vw 4% 5vw;
		bottom: 0;
		left: 0;
		background: #F6F8FA;
		.btn{
			height: 12vw;
			line-height: 12vw;
			border-radius: 7vw;
			text-align: center;
			width: 100%;
			background: #0DA4AD;
			font-size: 5vw;
			color: #ffffff;
			letter-spacing: 3rpx;
		}
	}
	
	.details_box {
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 5vw 4%;
		border-radius: 3vw;
	}
	
	.details_boxNo{
		padding: 0vw 4%;
	}
	
	.details_box .details_title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 5vw;
	}
	
	.details_box .input_box{
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #FC5D20;
		height: 15vw;
	}
	
	.details_box .input_box .m{
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		margin-top: 2vw;
	}
	
	.details_box .input_box input{
		font-size: 7vw;
		color: #333;
		flex: 1;
		font-weight: bold;
	}
	
	.details_box .list {
		width: 100%;
		padding: 5vw 0;
		border-bottom: 1px solid #F3F3F3;
		display: flex;
		align-items: center;
	}
	
	.details_box .list .name {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 4vw;
	}
	
	.details_box .list .text {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.details_box .list .text .i{
		width: 5vw;
		margin-right: 1vw;
	}
	
	.details_box .list .text .i image{
		width: 100%;
	}
	
	.details_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
		text-align: right;
		font-weight: bold;
	}
	
	.details_box .list .arrow {
		font-size: 3.5vw;
		color: #333;
	}
	
	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	
	.pupu_box .pupu_show {
		width: 100%;
		background-color: #fff;
		border-radius: 4vw 4vw 0 0;
		padding: 5vw 4vw;
		position: relative;
	}
	
	.pupu_box .pupu_show .pupu_title{
		font-size: 4.5vw;
		color: #333;
		text-align: center;
		font-weight: bold;
		padding-bottom: 5vw;
	}
	
	.pupu_box .pupu_show .close{
		font-size: 4vw;
		color: #333;
		text-align: center;
		position: absolute;
		right: 5vw;
		top: 5vw;
	}
	
	.pupu_box .pupu_show .pupu_value{
		max-height: 70vh;
		width: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
		
	}
	
	.pupu_content{
		width: 100%;
		height: 100%;
	}
	
	.bank_list{
		width: 100%;
		display: flex;
		align-items: center;
		height: 15vw;
	}
	
	.bank_list .icon{
		width: 7vw;
		margin-right: 3vw;
	}
	
	.bank_list .icon image{
		width: 100%;
	}
	
	.bank_list .text{
		flex: 1;
		font-size: 3.6vw;
		color: #333;
		font-weight: bold;
	}
	
	.bank_list .tick{
		font-size: 6vw;
		color: transparent;
	}
	
	.bank_list .arrow{
		font-size: 4vw;
		color: #A5A7AD;
	}
	
	.tickColor{
		color: #FC5D20 !important;
	}
	
	.pupu_menu{
		width: 100%;
		height: 13vw;
		border-radius: 13vw;
		line-height: 13vw;
		text-align: center;
		background-color: #FF7701;
		color: #fff;
		font-size: 4vw;
		margin: 0 auto;
		margin-top: 8vw;
		font-weight: bold;
	}
	
	
	
	
	
	
</style>
